<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>制作图片切换效果</title>

    <style type="text/css">
        body {
            margin: 20px auto;
            padding: 0;
            width: 580px;
            font: 75%/120% Arial, Helvetica, sans-serif;
        }
        
        h2 {
            font: bold 190%/100% Arial, Helvetica, sans-serif;
            margin: 0 0 0.2em;
        }
        
        h2 em {
            font: normal 80%/100% Arial, Helvetica, sans-serif;
            color: #999999;
        }
        
        #largeImg {
            border: solid 1px #ccc;
            width: 550px;
            height: 400px;
            padding: 5px;
        }
        
        .thumbs img {
            border: solid 1px #ccc;
            width: 100px;
            height: 100px;
            padding: 4px;
        }
        
        .thumbs img:hover {
            border-color: #ff9900;
        }
        
        .alpha {
            filter: alpha(Opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function() {
            $(".thumbs a").click(function(event) {
                event.preventDefault();

                // 获取点击的缩略图的大图链接和标题
                var imgUrl = $(this).attr("href");
                var imgTitle = $(this).attr("title");

                // 更新大图和标题
                $("#largeImg").attr("src", imgUrl);
                $("h2").text("图片切换 - " + imgTitle);
            });
        });
    </script>
</head>

<body>
    <h2>图片切换</h2>

    <p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p>

    <p class="thumbs">
        <a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>
        <a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>
        <a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg" /></a>
        <a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg" /></a>
        <a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a>
    </p>
    <br />
    <div index="1" data-index="2">我是div</div>
</body>

</html>